<template>
  <div class='login_page'>
    <div class="logo">
      <img src="@/static/images/login/login_logo.jpg" alt="" class="login_logo">
    </div>
    <div class="form_box">
      <div class="login">
        <p class="title">登录</p>
        <p class="title_bt">注册登录后体验更精彩</p>
        <div class="file_box">
          <div class="fiel_name" :style="nameboxStyle">
              <van-field
              v-model="name"
              clearable
              left-icon="contact"
              placeholder="请输入用户名"
              @focus="foucusMit"
              @blur ="blurMit"
            />
          </div>
          <div class="fiel_passd van-hairline--bottom" :style="passdboxStyle">
              <van-field
              v-model="passd"
              clearable
              left-icon="lock"
              placeholder="请输入密码"
              type="password"
              @focus="passdfoucusMit"
              @blur ="passdblurMit"
            />
          </div>
        </div>
        <div class="regist_btn">
          <span @click="registShow = !registShow">立即注册</span>
        </div>
        <div class="login_btn flex">
          <div class="login_btn_view flex felx_ac" @click="login()">
            <span class="login_text">登录</span>
            <van-icon name="down" class="login_icon" />
          </div>
        </div>
      </div>
    </div>
    <transition name="van-slide-up">
      <div class="regisg_box" v-show="registShow">
        <van-nav-bar title="" left-text="">
          <template #right>
            <div class="login_btn_view flex felx_ac" @click="registShow = !registShow">
             <span class="login_text">登录</span>
            <van-icon name="down" class="login_icon" />
          </div>
          </template>
        </van-nav-bar>
        <regist-view></regist-view>
      </div>
    </transition>
  </div>
</template>
<script>
import registView from '@/components/comone/registView'
export default {
  components: {
    registView
  },
  data () {
    return {
      name: 'admin',
      passd: '',
      box: {
        boxShadow: '0 5px 18px rgb(184 212 247 / 50%)',
        '-webkit-transition': 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)',
        transition: 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)',
        backgroundColor: '#ffffff',
        borderBottom: '1px solid #ffffff',
        borderRadius: '8px'
      },
      nameboxStyle: {
        borderBottom: '1px solid #dbdbdb',
        boxSizing: 'border-box'
      },
      passdboxStyle: {
        borderBottom: '1px solid #dbdbdb',
        boxSizing: 'border-box'
      },
      boxStyle: {
        borderBottom: '1px solid #dbdbdb',
        boxSizing: 'border-box'
      },
      registShow: false
    }
  },
  methods: {
    foucusMit() {
      this.nameboxStyle = this.box
    },
    blurMit() {
      this.nameboxStyle = this.boxStyle
    },
    passdfoucusMit() {
      this.passdboxStyle = this.box
    },
    passdblurMit() {
      this.passdboxStyle = this.boxStyle
    },
    // 登录
    login() {
      let _this = this
      let name = _this.name 
      let passd = _this.passd
      // 登录前先检查用户名和密码
      if(name  == '' || passd == '') {
        _this.$toast.fail('姓名或密码不能为空')
      } else {
        let obj = {
          name: name,
          passd: passd
        }
        // 发送登录请求
        _this.$api.sumrue.login_api(obj).then( async res=>{
          console.log(res)
          let token = res.token
          await window.localStorage.setItem('token',token)
           _this.$toast.success('登录成功')
           setTimeout(function() {
              let path = _this.$store.state.topath
              _this.$router.push(path)
           }, 1500)
        })
      }
    }
  }
}
</script>

<style scoped>
  .login_page {
    min-height: 100vh;
    width: 100%;
    padding: 1px 0 0 0;
    background: linear-gradient(190deg, #ffffff, #ffffff, #efefef, #e0e0e0);
    box-sizing: border-box;
    position: relative;
  }
  .logo {
    width: 100%;
    margin-top: 16%;
    text-align: center;
  }
  .login_logo {
    width: 12rem;
    height: 12rem;
  }
  .form_box {
    width: 100%;
    min-height: 30rem;
  }
  .login,.regist {
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
  } 
  .title {
    font-size: 2.4rem;
    font-weight: 500;
  }
  .title_bt {
    color: rgb(156, 156, 156);
    margin: 1rem 0 2rem 0;
  }
  .file_box>.fiel_name>.van-cell {
    background-color:#ffffff00;
  }
  .fiel_passd {
    margin: 2rem 0 1rem;
  }
  .file_box>.fiel_passd>.van-cell {
    background-color:#ffffff00
  }
  .regist_btn {
    width: 100%;
    text-align: right;
  }
  .login_btn {
    width: 100%;
    margin-top: 3rem;
    justify-content: flex-end;
  }
  .login_icon {
    transform: rotate(-90deg);
    margin-left: .5rem;
    color: #ffffff;
  }
  .login_btn_view {
    padding: .8rem 1.3rem;
    color: #ffffff;
    border-radius: 24px;
    justify-content: center;
    background: linear-gradient(to right, #7965E6, #7484DC);
  }
  .login_text {
    margin-left: .5rem;
  }
  .regisg_box {
    width: 100%;
    min-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: #ffffff;
  }
</style>
